<template>
  <view class="personal">
    <view class="header">
      <image :src="userinfo.avatar ? userinfo.avatar : '/static/mine.png'" mode="" class="photo"></image>
      <view class="infoName">
        <view class="nickName">{{ userinfo.nick_name }}</view>
        <text>{{ userinfo.fullRoleName }}</text>
      </view>
      <view class="msg">
        <view>{{ userinfo.phone }}</view>
        <view>{{ userinfo.tenantName }}</view>
      </view>
      <view class="btn">
        <view class="btn_item" @click="changeRole" v-if="showRoleBtn"
          :style="{ marginRight: showRoleBtn ? '24rpx' : 0 }">
          <image src="/static/images/index/switch.png" mode=""></image>
          <view>切换角色</view>
        </view>

        <view class="btn_item" @click="toInfo">
          <image src="/static/images/edit3.svg" mode=""></image>
          <view>编辑信息</view>
        </view>
      </view>
    </view>
    <view class="main">
      <template v-for="(item, index) in list" >
        <view class="main_item" :key="index" v-if="findRoute(item.route)" @click="toDetail(item)"
       >
        <view class="left">
          <view class="iconBox">
            <image :src="item.icon" mode=""></image>
          </view>
          <view class="custom">
            <button class="" v-if="!item.isButton">
              {{ item.name }}
              <view class="badge" v-if="item.badge && item.badge > 0">{{
                item.badge
              }}</view>
            </button>
            <button open-type="feedback" v-if="item.name === '建议反馈'">
              建议反馈
            </button>
            <button type="primary" open-type="contact" v-if="item.name === '联系客服'">
              联系客服
            </button>
          </view>
        </view>
        <view><uni-icons type="arrowright" size="16" color="#999"></uni-icons></view>
      </view>
      </template>

      <view class="main_item" @click="
        toDetail({
          isButton: false,
          url: '/pageModules/setting/index',
          name: '设置',
        })
        ">
        <view class="left">
          <view class="iconBox">
            <image src="@/static/images/index/setting.png" mode=""></image>
          </view>
          <view class="custom">
            <button class="">设置</button>
          </view>
        </view>
        <view><uni-icons type="arrowright" size="16" color="#999"></uni-icons></view>
      </view>
    </view>
    <view class="logOut" :style="{ bottom: 64 + bottom + 'px' }">
      <span class="version">version:{{ version || "-" }}</span>
      <view @click="handLogOut">退出登录</view>
    </view>
  </view>
</template>

<script>
import { hanleToken } from '@/utils/utils.js';
import { loginOut } from '@/apis/login.js';
import { mapState, mapActions } from 'vuex';
// import { updateAvatar } from '@/apis/personalCenter.js';
import { getUnreadCount, getUserMsgPage } from '@/apis/notice.js';
import { getAppealQuestion } from '@/apis/appeal.js';
export default {
	props: {
		bottom: {
			type: Number,
		},
	},
	data() {
		return {
			version: '',
			list: [
				{
					name: '我的电梯',
					icon: '/static/images/index/wddt.png',
					url: '/pageModules/myElevator/myElevatorPlus',
					route: 'maintain_home',
				},
				{
					name: '个人工单',
					icon: '/static/images/index/lsgd.png',
					url: '/subpages/workOrders/records?type=2',
					route: 'maintain_home',
				},
				{
					name: '保养整改问题申诉',
					icon: '/static/images/index/correction.png',
					url: '/subpages/correction/appeal',
					route: 'maintain_appeal',
					badge: 0,
				},
				{
					name: '使用帮助',
					icon: '/static/images/index/sybz.png',
					url: '/pageModules/personalInfo/userHelp',
					route: 'maintain_home',
				},
				{
					name: '消息通知',
					icon: '/static/images/index/xxtz.png',
					url: '/subpages/notice/list',
					route: 'maintain_home',
					badge: 0,
				},
				{
					name: '建议反馈',
					icon: '/static/images/index/jy.png',
					route: 'maintain_home',
					url: '',
					isButton: true,
				},
				{
					name: '联系客服',
					icon: '/static/images/index/kf.png',
					route: 'maintain_home',
					url: '',
					isButton: true,
				},
				// { name: '设置', icon: '/static/images/index/setting.png', url: '/pageModules/setting/index' }
			],
			// hanleToken: hanleToken('get', 'userData'),
			avatar: '',
		};
	},
	onLoad() {
		// this.avatar = hanleToken('get', 'userData').avatar;
	},
	onShow() {},
	created() {
		try {
			const accountInfo = wx.getAccountInfoSync();
			console.log(accountInfo.miniProgram);
			this.version =
        accountInfo.miniProgram.version || accountInfo.miniProgram.envVersion;
		} catch (error) {
			console.log(error);
		}
		// 获取未读消息计数
		this.getUnreadCount();
		this.getAppealCount();
		uni.$on('refreshUnreadCount', () => {
			console.log('created-refreshUnreadCount');
			this.getUnreadCount();
		});
		uni.$on('appealCount', () => {
			this.getAppealCount();
		});
	},
	// #ifdef H5
	mounted() {
		document.body.style.backgroundColor = '#2c2c2c';
	},
	// #endif
	beforeDestroy() {
		console.log('beforeDestroy-refreshUnreadCount');
		uni.$off('refreshUnreadCount');
		uni.$off('appealCount');
	},
	computed: {
		...mapState('user', ['userinfo']),
		showRoleBtn() {
			// let flag = false;
			// let list = hanleToken('get', 'userCompanyInfo');

			// if (list.length === 1) {
			// 	if (list[0].roleList.length > 1) {
			// 		flag = true;
			// 	} else {
			// 		flag = false;
			// 	}
			// } else {
			// 	flag = true;
			// }
			return true;
		},
	},
	methods: {
		...mapActions('user', ['handleRreshToken', 'logoutFuc']),
		toDetail({ isButton, url, name }) {
			if (isButton) {
				// console.log('意见反馈');
				return;
			} else {
				if (name === '我的电梯') {
					uni.setStorage({
						key: 'statistical',
						data: {
							id: '',
							title: '',
							groupId: '',
						},
						success: () => {
							uni.navigateTo({
								url,
							});
						},
					});
				} else {
					uni.navigateTo({
						url,
						success: (res) => {
							console.log(res);
						},
						fail: (err) => {
							console.log(err);
						},
					});
				}
			}
		},
		changeRole() {
			uni.navigateTo({
				url: '/pages/login/companySelect?phone=' + this.userinfo.phone,
			});
		},
		toInfo() {
			// console.log(hanleToken.user_id);
			// return
			uni.navigateTo({
				url: '/pageModules/personalInfo/index?id=' + this.userinfo.user_id,
			});
		},
		handLogOut() {
			// let _this = this;
			uni.showModal({
				title:'提示',
				content: '是否确定退出登录',
				success: (res) => {
					if (res.confirm) {
						uni.showLoading({
							title: '加载中',
						});
						uni.hideLoading();
						loginOut().then((res) => {
							if (res) {
								uni.hideLoading();
								uni.clearStorage();
								this.logoutFuc(); 
								setTimeout(() => {
									uni.navigateTo({
										url: '/pages/login/index',
									});
								}, 500);
							}
						});
					}
				},
			});
		},
		// 查询可申诉整改单数量
		getAppealCount() {
			getAppealQuestion({ appealStatusStr: '1', currentId: this.userinfo.user_id }).then(res => {
				this.list.forEach(item => {
					if (item.name === '保养整改问题申诉') {
						item.badge = res.data.total || 0;
					}
				});
			});
		},
		// 查询通知列表未读数量
		async getUnreadCount() {
			console.log('看看消息查询数据');
			try {
				const res = await getUnreadCount();
				const res2 = await getUserMsgPage({ current: 1, size: 10, typeId: 14, status: 1 });
				console.log(res, 'res');
				let count = 0;
				if (res && res.code == 200) {
					count += res.data || 0;
				}
				if (res2 && res2.code == 200) {
					console.log(res2, 'getUserMsgPage');
					count += res2.data.total;
				}
				console.log(count, 'count');
				for (const item of this.list) {
					if (item.name === '消息通知') {
						item.badge = count;
						break;
					}
				}
				this.$emit('get-msg-count', count);
			} catch (error) {
				console.log(error);
			}
		},
	},
};
</script>

<style lang="scss" scoped>
button {
  padding: 0;
  margin: 0;
}

button:after {
  border: none;
}

.personal {
  background-color: #f3f6f8;
  height: 100%;

  .header {
    background-color: #2c2c2c;
    color: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 12rpx 0 24rpx 0;

    image {
      width: 112rpx;
      height: 112rpx;
      border-radius: 50%;
      // margin-bottom: 4rpx;
    }

    .photo {
      margin-bottom: 4rpx;
    }

    .infoName {
      display: flex;
      align-items: center;
      margin-bottom: 2rpx;
      margin-top: 4rpx;
      height: 44rpx;

      text {
        border-radius: 4rpx;
        font-size: 22rpx;
        padding: 4rpx 8rpx;
        margin-left: 6rpx;
        display: flex;
        height: 32rpx;
        align-items: center;
        justify-content: center;
        box-sizing: border-box;
      }

      .nickName {
        font-size: 32rpx;
        font-weight: 600;
        color: #ffffff;
        height: 44rpx;
      }
    }

    .msg {
      color: #999;
      font-size: 24rpx;
      width: 100%;
      display: flex;
      align-items: center;
      flex-direction: column;

      view {
        margin-bottom: 2rpx;
        height: 32rpx;
      }
    }

    .btn {
      display: flex;
      margin-top: 16rpx;
      justify-content: center;
      // background-color: pink;
      width: 100%;

      image {
        width: 32rpx;
        height: 32rpx;
      }

      .btn_item {
        width: 156rpx;
        height: 40rpx;
        border: 2rpx solid #cccccc;
        border-radius: 22rpx;
        font-size: 24rpx;
        display: flex;
        justify-content: center;
        align-items: center;
      }
    }
  }

  .main {
    margin: 0 20rpx;

    .main_item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 80rpx;
      background: #ffffff;
      margin-top: 16rpx;
      border-radius: 8rpx;
      padding: 0 20rpx;

      .left {
        display: flex;
        align-items: center;
        color: #333;
        font-size: 28rpx;
        flex: 1;

        button {
          background: none;
          color: #333;
          display: flex;
          justify-content: flex-start;
        }

        image {
          width: 48rpx;
          height: 48rpx;
          margin-right: 16rpx;
        }

        .iconBox {
          display: flex;
        }
      }

      .custom {
        width: 100%;

        .badge {
          width: 32rpx;
          height: 32rpx;
          background: #e02020;
          border-radius: 50%;
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 20rpx;
          color: #fff;
          margin-left: 10px;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }
      }
    }
  }

  .logOut {
    display: flex;
    width: 100%;
    border-radius: 8rpx;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
    color: #fff;
    font-size: 26rpx;
    position: fixed;
    bottom: 128rpx;

    view {
      width: 240rpx;
      background: #0091ff;
      height: 64rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 8rpx;
    }

    .version {
      position: absolute;
      top: -45rpx;
      font-size: 24rpx;
      color: #ccc;
    }
  }
}
</style>
